<template>
  <div class="swipe">
    <h1>最受欢迎的公司TOP 10</h1>
    <div class="swiper-container" v-swiper:mySwiper="swiperOption">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item,index) of companyList" :key="index">{{item}}</div>
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination"></div>
    </div>
    <canvas ref="canvas" width="300px" height="300px"></canvas>
  </div>
</template>

<script>
import {getFavourite} from "../api";

export default {
  name: 'testSwiper',
  data () {
    return {
      swiperOption: {
        autoplay: 1000,
        direction: 'vertical',
        // effect: 'cube',
        // speed: 2000,
        slidesPerView: 5,
        loop: true
      },
      companyList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
    }
  },
  methods: {
    getFavourite () {
      setInterval(() => {
        getFavourite().then(res => {
          res.data.data.company_top10.map(item => {
            this.companyList.push(item.company_name)
          })
        })
        // console.log(this.companyList)
      }, 5000)
    },
    handleCanvas () {
      const dom = this.$refs.canvas
      console.log(dom)
      dom.style.backgroundColor = '#ffffff'
      const ctx = dom.getContext('2d')
      // 左上角
      ctx.fillStyle = "#42b1f7"
      ctx.fillRect(0, 0, 5, 50);
      ctx.fillStyle = "#42b1f7";
      ctx.fillRect(0, 0, 50, 5);
      // 右下角
      ctx.fillStyle = "#42b1f7"
      ctx.fillRect(250, 295, 300, 300);
      ctx.fillStyle = "#42b1f7";
      ctx.fillRect(295, 250, 300, 300);
      // ctx.fillRect(30, 30, 55, 50);
      // ctx.clearRect(45, 45, 60, 60);
      // ctx.strokeRect(290, 10, 1, 300)
      // ctx.beginPath();
      // ctx.moveTo(75, 50);
      // ctx.lineTo(100, 75);
      // ctx.lineTo(100, 25);
      // ctx.fill();
      //
      // ctx.beginPath();
      // ctx.moveTo(0, 0)
      // ctx.lineTo(50, 100);
      // ctx.lineTo(0, 100)
      // ctx.fillStyle = "red"
      // ctx.fill();

      // 圆
      // ctx.beginPath();
      // ctx.arc(75, 75, 50, 0, Math.PI * 2, true);
      // ctx.moveTo(110, 75);
      // ctx.arc(75, 75, 35, 0, Math.PI / 2, false);
      // ctx.moveTo(65, 65);
      // ctx.arc(60, 65, 5, 0, Math.PI * 2, true);
      // ctx.moveTo(95, 65);
      // ctx.arc(90, 65, 5, 0, Math.PI * 2, true);
      // ctx.stroke();
      // ctx.closePath()

      ctx.beginPath();
      ctx.moveTo(75, 25);
      ctx.quadraticCurveTo(25, 25, 25, 62.5);
      ctx.stroke();

      this.roundedRect(ctx, 150, 150, 100, 100, 10)
    },
    roundedRect (ctx, x, y, width, height, radius) {
      ctx.beginPath();
      ctx.moveTo(x, y + radius);
      ctx.lineTo(x, y + height - radius);
      ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
      ctx.lineTo(x + width - radius, y + height);
      ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
      ctx.lineTo(x + width, y + radius);
      ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
      ctx.lineTo(x + radius, y);
      ctx.quadraticCurveTo(x, y, x, y + radius);
      ctx.stroke();
    }
  },
  mounted () {
    this.getFavourite()
    this.handleCanvas()
  }
}
</script>

<style lang="scss" scoped>
.swipe {
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;

  h1 {
    font-size: 35px;
    padding: 10px 0;
  }

  .swiper-container {
    width: 500px;
    height: 200px;
    /*background: pink;*/
    .swiper-wrapper {
      height: 100%;
      background: #3ba4f2;
    }

    .swiper-slide {
      display: flex;
      width: 100%;
      height: 20%;
      justify-content: center;
      align-items: center;
      text-align: center;
      font-size: 30px;
      background: #3ba4f2;
    }
  }
}
</style>
